// 成果详情页面

import './index.less';
import {View} from "@tarojs/components";
import {AchVideo, Article, Comment, DetailInfo, OverTip} from "../../components/detailCmpt";
import {useEffect, useState} from "react";
import {wxActions} from "../../utils/wxActions";
import {Api, token} from "../../api/api";
import Taro, {useReachBottom} from "@tarojs/taro";
import {UserTool} from "../../components/UserTool";
import {useLoginMask} from "../../hooks/useLoginMask";
import {connect} from "react-redux";
import {LoginMask} from "../../components/LoginMask";

function Detail(props) {
    const {dispatch} = props;
    const [achDetail, setAchDetail] = useState({}); // 成果详情
    const [commentListOwn, setCommentListOwn] = useState([]); // 自己的评论列表
    const [commentListOther, setCommentListOther] = useState([]); // 别人的评论列表
    const [commentListOtherTotal, setCommentListOtherTotal] = useState(0); // 别人的评论列表总数
    const [pageIndex, setPageIndex] = useState(1); // 页码
    const [content, setContent] = useState("") // 评论输入内容
    // 自定义hook
    const [loginMask, closeLoginMask, openLoginMask, getUserInfo] = useLoginMask(dispatch); // 登录弹窗

    const getId = () => {
        return wxActions.getCurrentPageParams("id");
    }

    useEffect(() => {
        wxActions.showLoading("加载中");
        const id = wxActions.getCurrentPageParams("id");
        Api.getAchDetail({
            proId: id
        }).then(res => {
            setAchDetail(res);
            Api.getCommentSelf({proId: id}).then(res => {
                setCommentListOwn(res);
            });
            Api.getCommentOther({
                proId: id,
                pageSize: 10,
                pageNum: 1
            }).then(res => {
                setCommentListOther(res.rows);
                setCommentListOtherTotal(res.total);
            });
        }).catch((err) => {
            wxActions.showTip(err.message)
        }).finally(() => {
            Taro.hideLoading();
        });
    }, []);

    // 下触底事件
    useReachBottom(() => {
        if (pageIndex * 10 >= commentListOtherTotal) {
            return;
        }
        wxActions.showLoading('加载中');
        Api.getCommentOther({
            proId: getId(),
            pageSize: 10,
            pageNum: pageIndex + 1
        }).then(res => {
            setCommentListOther([...commentListOther, ...res.rows]);
            setPageIndex(pageIndex + 1);
        }).finally(() => {
            Taro.hideLoading();
        });
    });

    // 刷新
    function refreshAch() {
        Api.getAchDetail({
            proId: getId()
        }).then(res => {
            setAchDetail(res);
        }).catch((err) => {
            wxActions.showTip(err.message)
        })
    }

    // 刷新我的评论
    function refreshComment() {
        Api.getCommentSelf({proId: getId()}).then(res => {
            setCommentListOwn(res);
        });
    }

    // 收藏按钮点击
    const collectClick = (isCollect) => () => {
        if (!token()) {
            openLoginMask();
            return;
        }
        if (isCollect === 0) {
            setAchDetail(obj => ({...obj, isCollect: 1}))
            Api.addCollect({
                proId: getId()
            }).then(() => {
               // refreshAch()
            })
        } else if (isCollect === 1) {
            setAchDetail(obj => ({...obj, isCollect: 0}))
            Api.delCollect({
                proId: getId()
            }).then(() => {
                //refreshAch()
            })
        }
    }

    // 点赞按钮点击
    const likeClick = (isPraise) => () => {
        if (!token()) {
            openLoginMask();
            return;
        }
        if (isPraise === 0) {
            setAchDetail(obj => ({...obj, isPraise: 1}))
            Api.addLike({
                proId: getId()
            }).then(() => {
                //refreshAch()
            })
        } else if (isPraise === 1) {
            setAchDetail(obj => ({...obj, isPraise: 0}))
            Api.delLike({
                proId: getId()
            }).then(() => {
                //refreshAch()
            })
        }
    }

    // 评论输入事件
    const handleInput = (e) => {
        setContent(e.target.value);
    }

    // 提交评论事件
    const submitComment = () => {
        if (!token()) {
            openLoginMask();
            return;
        }
        if (content.trim() === "") {
            wxActions.showTip("请输入合作需求");
            return;
        }
        Api.addComment({
            proId: getId(),
            content: content
        }).then(res => {
            refreshComment();
            setContent('');
        })
    }

    // 评论删除事件
    const commentRemove = (id) => {
        Api.delComment(id).then(res => {
            refreshComment()
            wxActions.showSuccess("删除成功")
        })
    }

    return (
        <View className={"detail"}>
            <View className={"video_row"}>
                <AchVideo achDetail={achDetail}/>
            </View>
            <View className={"info_row"}>
                <DetailInfo
                    achDetail={achDetail}
                    talkNum={commentListOtherTotal + commentListOwn.length}
                />
            </View>
            <View className={"info_article"}>
                <Article achDetail={achDetail}/>
            </View>
            <View className={"comment_row"}>
                <Comment
                    commentListOwn={commentListOwn}
                    commentListOther={commentListOther}
                    talkNum={commentListOtherTotal + commentListOwn.length}
                    commentRemove={commentRemove}
                    achDetail={achDetail}/>
            </View>
            <View className={"over_tip_row"}>
                <OverTip/>
            </View>
            <View className={"user_tool_row"}>
                <UserTool
                    achDetail={achDetail}
                    collectClick={collectClick}
                    likeClick={likeClick}
                    content={content}
                    handleInput={handleInput}
                    submitComment={submitComment}
                />
            </View>
            <LoginMask
                showLoginMask={loginMask}
                closeLoginMask={closeLoginMask}
                getUserInfo={getUserInfo}
            />
        </View>
    )
}

const mapStateToProps = (state) => ({
    reduxUserInfo: state.userState.reduxUserInfo
})

export default connect(mapStateToProps)(Detail);
